import React, {useEffect, useState} from "react";
import './parking_search.scss'
import {Button, Input, Select, Table} from "antd";
import {getManagerParkLotSearchResultInfo} from "../../api/parkLotApi";
import {Map, Marker, Markers} from "react-amap";

function ParkingSearch(props){

    const column = [
        {
            title: '停车场名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address'
        }
    ]

    const [data, setData] = useState([])

    const getData = () => {
        getManagerParkLotSearchResultInfo(14)
            .then(res => {
                console.log(res)
                setData(res)
            })
    }

    const positionMarker = () => (
        Array(data.length).fill(true).map((e, idx) => ({
            position: {
                longitude: data[idx].entranceLongitude,
                latitude: data[idx].entranceLatitude
            }
        }))
    );


    useEffect(() => {
        getData()
    }, []);


    return(
        <div>
            <div className={'component_container'}>
                <div className={'component_title'}>
                    停车场查询
                </div>

                <div className={'parking_search_container'}>
                    <div className={'parking_search_main'}>
                        <div className={'parking_search_item'}>
                            <div>停车场类型</div>
                            <Select placeholder={'请选择停车场类型'}>
                                <Select.Option>类型一</Select.Option>
                            </Select>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>是否重要商圈</div>
                            <Select placeholder={'是否重要商圈'}>
                                <Select.Option>是</Select.Option>
                                <Select.Option>否</Select.Option>
                            </Select>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>停车场等级</div>
                            <Select placeholder={'请选择停车场等级'}>
                                <Select.Option>等级一</Select.Option>
                            </Select>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>停车场名称</div>
                            <Input placeholder={'请输入停车场名称'}/>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>停车场地址</div>
                            <Input placeholder={'请输入停车场地址'}/>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>产权单位</div>
                            <Input placeholder={'请输入产权单位'}/>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>管理单位</div>
                            <Input placeholder={'请输入管理单位'}/>
                        </div>

                        <div className={'parking_search_item'}>
                            <div>地图查询半径</div>
                            <Input placeholder={'请输入地图查询半径'}/>
                        </div>

                        <div className={'parking_search_item'}>
                            <Button type={'primary'}>查询</Button>
                        </div>

                        <div className={'parking_search_item'}>
                            <Button type={'primary'}>重置</Button>
                        </div>

                        <Table columns={column} dataSource={data}/>

                    </div>

                    <div className={'parking_search_map'}>
                        <Map>
                            <Markers markers={positionMarker()}>
                            </Markers>
                        </Map>
                    </div>
                </div>


            </div>
        </div>
    )
}

export default ParkingSearch